<template>
    <section class="main">
			<input id="toggle-all" class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list">
				<li v-for="(item,index) in todoArr" :key="item.title" :class="{completed:item.completed}">
					<div class="view">
						<input @click="toggole(item)" class="toggle" type="checkbox">
						<label>{{item.title}}</label>
						<button @click="del(index)" class="destroy"></button>
					</div>
					<input class="edit">
				</li>
			</ul>
		</section>
</template>

<script>
export default {
    data() {
		return {
			
		}
	},
	props:{
		todoArr:{
			type:Array,
			default(){
				return []
			}
		}
	},
	methods:{
		toggole(item){
			this.$emit("complete",item);
		},
		del(index){
			this.$emit("del",index);
		}
	}
}
</script>